<template>
  <div class="big">
    <header>
      <h4>购物车</h4>
      <p>编辑</p>
      <img src="../../assets/更多.png">
    </header>
    <div class="zhong">
      <div class="heng">
        <p>
          全部(5)&nbsp;
          降价(0)&nbsp;
          常买(0)&nbsp;
          分类<el-icon><CaretBottom /></el-icon>
        </p>
      </div>
          
    </div>
    <div class="di">
      <p>
        <img src="../../assets/首页1.png" @click="home">
        <img src="../../assets/分类.png">
        <img src="../../assets/发现.png">
        <img src="../../assets/购物车1.png" >
        <img src="../../assets/我的.png" >
      </p>
    </div>
  </div>
</template>

<script setup>
import router from "@/router"
import {CaretBottom} from "@element-plus/icons-vue"

const home=()=>{
  router.push('/home/')
}
</script>

<style scoped>
header{
  background-color: #e63147;
  height: 32px;
  display: flex;
  padding-top: 30px;
  color: white;
}
header h4{
  position: absolute;
  left: 42%;
  font-weight: normal;
}
header p{
  position: absolute;
  right: 20%;
  top: 5%;
  font-size: 13px;
}
header img{
  width: 2vh;
  height: 11px;
  position: absolute;
  right: 10%;
  top: 5%;
}
.heng p{
  font-weight:bold;
  padding-left: 15px;
  margin-top: 10px;
}
.di{
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
}
.di p{
  padding-left: 10px;
  padding-right: 10px;
}
.di p img{
  width: 4vh;
  height: 32px;
  margin-left: 35px;
}
</style>